import React, { Component, Fragment } from 'react';
import { Upload, Button, Modal, Steps, Divider, Carousel, message } from 'antd';
import axios from './../../axios';
import './index.less';
const { Step } = Steps;
class UploadUserExcel extends Component {
	state = {
		isVisible: false,
		current: 0,//批量导入用户步骤条
		successNum: 0,//导入成功条数
		errNum: 0,//导入用户失败条数
		hasError: false,//是否有导入失败条数
	}
	
	//步骤条容器
	stepRef = React.createRef()
	
	//点击导入用户按钮
	importExcel = () => {
		this.setState({
			isVisible: true
		})
	}
	
	//导出模板
	downloadTemplate = () => {
		axios.excelAjax({url: "/Manager/DownloadMng/userListTemplate"});
	}
	
	//导出所有用户信息
	downloadFileToExcel = () => {
		axios.excelAjax({url: "/Manager/DownloadMng/userList"});
	}
	
	//导出导入失败的用户信息
	downloadFileToExcelForError = () =>　{
		axios.excelAjax({url: "/Manager/DownloadMng/createUserError"});
	}
	
	//上一步下一步
	onStepChange = (current) => {
		this.stepRef.current.goTo(current);
		this.setState({
			current: current
		})
	}
	
	customRequest = (option) => {
		this.onStepChange(2);
		const formData = new FormData();
		formData.append('file',option.file);
		axios.upload({
			url: "/Manager/UploadMng/upCreateUserExcel",
			data: formData
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				let successNum = res.result.success;
				let errNum = res.result.fail;
				let hasError = parseInt(errNum)>0?true:false;
				this.setState({
					successNum,
					errNum,
					hasError
				});
				this.props.handleUserImportSubmit();
			}else{
				message.error("上传文件失败");
			}
		}).catch(err=>{
			message.error("上传文件失败");
		})
	}
	
	//关闭模态框
	onCancel = () => {
		this.setState({
			isVisible: false,
		})
		//模态框恢复第一步
		this.onStepChange(0);
	}
	
	render(){
		return (
			<Fragment>
				<div className="upload-btn" style={{display: "inline-block"}}>
					<Button type="primary" onClick={this.importExcel}>
						导入用户
					</Button>
					<Button type="primary" onClick={this.downloadFileToExcel}>
						导出用户
					</Button>
				</div>
				<Modal
					title="批量导入用户"
					visible={this.state.isVisible}
					onCancel={this.onCancel}
					footer={null}
				>
					<Steps current={this.state.current}>
						<Step title="第一步" description="下载模板" />
						<Step title="第二步" description="上传用户" />
						<Step title="第三步" description="上传结果" />
					</Steps>
					<Divider />
					<div style={{textAlign: "center"}}>
						<Carousel ref={this.stepRef} dots={false}>
							<div>
								<Button type="primary" onClick={this.downloadTemplate}>
									下载模板
								</Button>
								<Button onClick={()=>this.onStepChange(1)}>
									下一步
								</Button>
								<p>如已有模板请直接点击下一步</p>
							</div>
							<div>
								<div className="shangc">
									<Button onClick={()=>this.onStepChange(0)}>
										上一步
									</Button>
									<Upload
										accept=".xls,.xlsx"
										showUploadList={false}
										customRequest={this.customRequest}
									>
									    <Button type="primary">选择文件</Button>
									</Upload>
								</div>
							</div>
							<div>
								{
									this.state.hasError?
									<div>
										<Button type="primary" onClick={this.downloadFileToExcelForError}>
											下载导入失败用户
										</Button>
										<p>成功导入{this.state.successNum}个文件,有{this.state.errNum}条导入不成功,请下载查看</p>
									</div>
									:<p>成功导入{this.state.successNum}个文件</p>
								}
							</div>
						</Carousel>						
					</div>
				</Modal>
			</Fragment>
		)
	}
}

export default UploadUserExcel;